<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Lucky Draw</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script>
var isShown=false;
function showHideParam(elem){
    if(isShown){
        $('.param_wrap').slideUp(400);
        $(elem).html('Open Parameter Settings');
        isShown=false;
    }else{
        $('.param_wrap').slideDown(400);
        $(elem).html('Close Parameter Settings');
        isShown=true;
    }
}
var isConfirmed=false;
var totalNum=0;
var candidates=[];
var prizeNum=[];
var curPrizeLevel=0;
function confirmSetting(elem){
    if(!isConfirmed){
        var isBad=false;
        //$('.param_table_input').each(function(idx,elem){
        //    if(!(parseInt($(elem).val())>0)){
        //        alert('Please input '+$(elem).attr('name')+'!');
        //        isBad=true;
        //    }
        //});
        if(!(parseInt($('.param_table_input').eq(0).val())>0)){
            alert('Please input '+$('.param_table_input').eq(0).attr('name')+'!');
            return;
        }
        //if(isBad)   return;
        totalNum=parseInt($('.param_table_input').eq(0).val());
        for(i=1;i<=totalNum;i++){
            var tempStr="";
            for(j=0;j<3-i.toString().length;j++){
                tempStr+="0";
            }
            tempStr+=i.toString();
            candidates.push(tempStr);
        }
        var isFinished=false;
        $('.pzin').each(function(idx,elem){
            if(!isFinished){
                if(parseInt($(elem).val())>0){
                    prizeNum.push(parseInt($(elem).val()));
                }
                else{
                    curPrizeLevel=idx-1;
                    isFinished=true;
                }
            }
        });
        //whether there're enough candidates
        if(isFinished==false){
            curPrizeLevel=3;
        }
        var totalPick=0;
        for(i=0;i<=curPrizeLevel;i++){
            totalPick+=prizeNum[i];
        }
        if(totalPick>totalNum){
            alert("There're not enough candidates!!");
            return;
        }
        $('.prize_start_hint').html($('.pzin').eq(curPrizeLevel).attr('name'));
        $(elem).removeClass('a_2F84EA').removeClass('pointer').addClass('a_666666').html('Settings Confirmed');
        isConfirmed=true;
    }
}
function pickNumber(){
    if(candidates.length>0){
        var randIdx=Math.floor(Math.random()*candidates.length);
        return candidates.splice(randIdx,1);
    }
    else{
        return [""];
    }
}
function generatePrize(level){
    $('.prize_name').html($('.pzin').eq(level).attr('name'));
    $('.prize_table').empty();
    var prizeList=[];
    var prizeRow=$('<tr>');
    for(i=0;i<prizeNum[level];i++){
        var pz=pickNumber();
        prizeList.push(pz[0]);
    }
    prizeList.sort();
    for(i=0;i<prizeNum[level];i++){
        $('<td>').attr('class','prize_table_item').html(prizeList[i]).appendTo($(prizeRow));
        if(i%5==4){
            $(prizeRow).appendTo($('.prize_table'));
            prizeRow=$('<tr>');
        }
    }
    if(prizeNum[level]%5!=4){
        $(prizeRow).appendTo($('.prize_table'));
    }
}

function showPrizeList(){
    if($('.prize_display').css('display')!='none'){
        $('.prize_display').slideUp(300,countDownAnimation);
    } else {
        countDownAnimation();
    }
    
}

function countDownAnimation(){
    var countDown=3;
    $('.prize_indicator_right').html('&nbsp;');
    $('.prize_start_box').hide(300,function(){
        $('.prize_indicator').show(300,function(){
            timerId=setInterval(function(){
                if(countDown>0){
                    $('.prize_indicator_right').html(countDown);
                    countDown--;
                }else{
                    clearInterval(timerId);
                    $('.prize_indicator').slideUp(300,function(){
                        generatePrize(curPrizeLevel);
                        $('.prize_display').slideDown(300);
                        curPrizeLevel--;
                    });    
                }
            },1000);
        });
    });

}

function startPick(){
    var timerId;
    if(isConfirmed){
        if(candidates.length==0){
            alert("There's no more candidates!!");
            return;
        }
        showPrizeList();
    }else{
        alert('Please check the parameter and CONFIRM!');
    }
}
function repick(){
    if(candidates.length==0){
        alert("There's no more candidates!!");
        return;
    }
    curPrizeLevel++;
    showPrizeList();
}
function returnToStart(){
    $('.prize_display').slideUp(300,function(){
        if(curPrizeLevel>=0){
            $('.prize_start_hint').html($('.pzin').eq(curPrizeLevel).attr('name'));
        }else{
            $('.prize_start_button').hide();
            $('.prize_start_hint').html('Did you have luck?');
        }
        $('.prize_start_box').slideDown(300);
    });
}
</script>
</head>
<body class="body_style">
<div class="wrap960">
    <div class="fancy_border title">Lucky Draw<div class="title_inner">For CISDI Info</div></div>
    <div class="fancy_border param_box">
        <div class="param_setting a_2F84EA pointer" onclick="showHideParam(this);">Open Parameter Settings</div>
        <div class="param_setting a_2F84EA pointer" onclick="confirmSetting(this);">Confirm Settings</div>
        <div style="clear:both"></div>
        <div class="param_wrap">
            <table class="param_table">
            <tr>
                <td class="param_table_item">Total Number:</td>
                <td><input class="param_table_input" type="text" name="Total Number"/></td>
            </tr>
            <tr>
                <td class="param_table_item">Special Prize:</td>
                <td><input class="param_table_input pzin" type="text" name="Special Prize" value="1"/></td>
                <td class="param_table_item">First Prize:</td>
                <td><input class="param_table_input pzin" type="text" name="First Prize" value="2"/></td>
            </tr>
            <tr>
                <td class="param_table_item">Second Prize:</td>
                <td><input class="param_table_input pzin" type="text" name="Second Prize" value="20"/></td>
                <td class="param_table_item">Third Prize:</td>
                <td><input class="param_table_input pzin" type="text" name="Third Prize" value="20"/></td>
            </tr>
            </table>
        </div>
    </div>
    <div class="fancy_border prize_box">
        <div class="prize_start_box">
            <div class="prize_start_button" onclick="startPick();">Let's Start!</div>
            <div class="prize_start_hint">&nbsp;<!--Special Prize--></div>
        </div>
        <div class="prize_indicator">
            <div class="prize_indicator_left a_666666">Stand by...</div><div class="prize_indicator_right a_2F84EA">3</div>
        </div>
        <div class="prize_display">
            <div class="prize_name">Special Prize</div>
            <table class="prize_table">
            
            </table>
            <div style="clear:both"></div>
            <div class="prize_start_button" onclick="returnToStart();">Return</div>
            <div class="prize_gap"></div>
            <div class="prize_repick_button" onclick="repick();">REPICK!!!</div>
        </div>
    </div>
</div>
</body>
</html>